<template>
    <div class="tabBarItem" @click="switchTab">
        <slot name="icon" v-if="!isShown"></slot>
        <slot name="iconActive" v-else></slot>
        <div :class="{active:isShown}">
            <slot name="text"></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'TabBarItem',
        props: {
            link:{
                type: String,
            }
        },
        data(){
            return{
              
            }
        },
        computed:{
            isShown:{
                get(){
                   
                    return this.$route.path.indexOf(this.link) !== -1
                },
                set(newValue){
                    
                }
            }
            
        },
        methods:{
            switchTab(){
                this.isShown = false;
                this.$router.push(this.link)
                
            }
        }
    }

</script>
<style scoped>
    .tabBarItem {
        flex: 1;
        height: 49px;
        text-align: center
    }

    .tabBarItem img {
        width: 24px;
        height: 24px;
    }
    .active{
        color:deeppink
    }

</style>
